<template>
 <div class="app">
    <div class="view">
      <router-view></router-view>
    </div>
    <div class="nav" v-show="$route.meta.show">
      <router-link :to="{ name: 'home' }"><i class="iconfont icon-shouye"></i> 首页</router-link>
      <router-link :to="{ name: 'hemaxiaozhen' }"><i class="iconfont icon-xianhua"></i>河马小镇</router-link>
      <router-link :to="{ name: 'chishenme' }"><i class="iconfont icon-didaomeishi"></i>吃什么</router-link>
      <router-link :to="{ name: 'car' }"><i class="iconfont icon-gouwuche"></i>购物车</router-link>
      <router-link :to="{ name: 'user' }"><i class="iconfont icon-wode"></i>我的</router-link>
    </div>
  </div>
</template>

<script>


export default {
  name: 'App',
  components: {

  }
}
</script>

<style lang="scss">
.app {
  height: 100vh;
  display: flex;
  flex-direction: column;

  .view {
    flex: 1;
  }

  .nav {
    height: 50px;
    display: flex;
      flex-wrap: nowrap;
      text-align: center;
      a{
        flex: 1;
        color: black;
        text-decoration: none;
        font-size: 14px;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
  }
}
</style>
